<!-- /drawPath 页面， 暂无内容 -->
<template>
  <div class="abour">
    <!-- <iframe
      id="localsense_id"
      name="iframe_localsense"
      width="100%"
      height="100%"
      src="http://111.202.125.50:28180/localsense/#/SingleModule/index/overview"
      frameborder="0"
    ></iframe>-->
    <!-- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <g stroke="#AAB0BA" fill="none" fill-rule="evenodd">
    <path d="M10.524 3.413v8.235" stroke-linejoin="round"/>
    <path d="M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07"/>
  </g>
    </svg>-->
    <!-- @mousewheel="wheel" -->
    <!-- <svg
        class="svg"
        ref="svg"
        style="width:1000px;height:500px;"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g>
          <image
            xlink:href="../assets/.jpg"
            x="0"
            y="0"
            height="500px"
            width="1000px"
          />
        </g>
        <path
          class="testPath"
          :d="Drawpath"
          stroke="#f50"
          fill="none"
          style="stroke-width:2px"
        ></path>
    </svg>-->
  </div>
</template>

<script>
import md5 from "md5";
import axios from "axios";
export default {
  data() {
    return {
      Drawpath: "M10 10"
    };
  },
  mounted() {
    var pwd = md5("Ysq0622");

    // var pwd = md5(md5("localsense") + "abcdefghijklmnopqrstuvwxyz20191107salt");
    // var url =
    //   "http://localhost:8180/localsenseadmin/login?username=admin&password=" +
    //   pwd;
    // axios.get(url).then((response) => {
    //   var localsense_dom = document.getElementById("localsense_id");
    //   if (msg.result == "success") {
    //     varurl = "http://localhost:8180/localsenseadmin";
    //     localsense_dom.src = url;
    //   }
    // });
    // let pathArr = []; //坐标点
    // var that = this;

    // function setPath(pointArr) {
    //   pathArr.push([...pointArr]);
    //   //   let pathTemp = that.Drawpath.split(",");
    //   //   pathTemp.length > 1 ? pathTemp.splice(pathTemp.length - 1, 1) : null;
    //   //   that.Drawpath = pathTemp.join(",");
    //   //   that.Drawpath = `${that.Drawpath}, L${pointArr[0]} ${pointArr[1]}, M${pointArr[0]} ${pointArr[1]}`;
    //   console.log(that.Drawpath);
    //   if (pathArr.length > 5) {
    //     let prePonit = pathArr.shift();
    //     let pathTemp = that.Drawpath.split(",");
    //     pathTemp.splice(0, 2, `M${prePonit[0]} ${prePonit[1]}`);
    //     pathTemp.splice(pathTemp.length - 1, 1);
    //     that.Drawpath = pathTemp.join(",");
    //     that.Drawpath = `${that.Drawpath}, L${pointArr[0]} ${pointArr[1]}, M${pointArr[0]} ${pointArr[1]}`;
    //   } else {
    //     let pathTemp = that.Drawpath.split(",");
    //     pathTemp.length > 1 ? pathTemp.splice(pathTemp.length - 1, 1) : null;
    //     that.Drawpath = pathTemp.join(",");
    //     that.Drawpath = `${that.Drawpath}, L${pointArr[0]} ${pointArr[1]}, M${pointArr[0]} ${pointArr[1]}`;
    //   }
    // }
    // let pathPointArr = [
    //   [100, 150],
    //   [200, 100],
    //   [300, 300],
    //   [400, 200],
    //   [500, 350],
    //   [600, 250],
    //   [550, 60],
    //   [689, 32],
    // ];

    // pathPointArr.forEach((item, i) => {
    //   setTimeout(() => {
    //     setPath(item);
    //   }, i * 500);
    // });
  },
  components: {
    // timeWrap
  },
  methods: {
    // wheel(event, delta) {
    //   var $svg = this.$refs.svg;
    //   // console.log($svg)
    //   var dir = delta > 0 ? "Up" : "Down";
    //   // $svg.style.transform="scale(1.2)"
    //   var scale = parseFloat($svg.style.transform.replace(/[^0-9\-\.,]/g, "").split(",")[0]);
    //   console.log(scale);
    //   if (dir == "Up") {
    //     $svg.style.cssText({
    //       transform: "scale(" + (scale + 0.1) + ")",
    //     });
    //   } else {
    //     $svg.style.cssText({
    //       transform: "scale(" + (scale - 0.1) + ")",
    //     });
    //   }
    // },
  }
};
</script>

<style></style>

<style scoped>
.abour {
  color: #fff;
  min-height: 100%;
  /* height: auto !important; */
  height: 100%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: #06164a;
}

header {
  /* background-image: url("../../public/m2-01.png"); */
  width: 100%;
  height: 65px;
  /* background-image: url("../assets//jpg"); */
}

.svg {
  /* background-image: url("../assets/.jpg"); */
}

.testPath {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 1s linear 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>